import React, { memo,useEffect } from 'react'
import { ArtistWrapper } from './style'
import type { ReactNode } from 'react'
import ArtistCategory from './c-pages/artist-category'
import ArtistList from './c-pages/artist-list'
import { useAppDispatch, useAppSelector } from '@/store'
import { fetchArtistListAction } from './store/artist'


interface IProps {
  children?: ReactNode
}

const Artist: React.FC<IProps> = () => {
  // const dispatch = useAppDispatch()
  //   const { currentArea, currentType } = useAppSelector((state) => ({
  //   currentArea: state.artist.currentArea,
  //   currentType: state.artist.currentType
  // }))
  // useEffect(() => {
  //   dispatch(fetchArtistListAction({ area: currentArea, type: currentType.type, initial:"-1"  }))

  // }, [dispatch, currentArea, currentType.type])
  return (
    <ArtistWrapper>
      <div className="content wrap-v2">
        <ArtistCategory />
        <ArtistList />
      </div>
    </ArtistWrapper>
  )
}

export default memo(Artist)
